草庐IT

React 组件

全部标签

javascript - 将 html 传递给 Vue 组件

目前我将一些参数传递给vue组件hello','goodbye']"slider是“html”slider或带有图像的slider。虽然我传入的html会变得更复杂,可能有30行,但作为参数将更难阅读和管理,这工作正常。我可以传入外部引用并将其拉入组件吗?{{content}}如您所见,组件中的循环是一个非常简单的v-for。 最佳答案 不要使用属性传递HTML,而是使用Slots:Supposewehaveacomponentcalledmy-componentwiththefollowingtemplate:I'mthechil

javascript - 如何将 Prop 传递给组件的故事?

我想为vue-select添加一些故事组件使用Storybook,但我正在努力处理更复杂的案例,其中涉及传递Prop或方法。当我在模板内传递Prop时它起作用:storiesOf('VSelect',module).add('withlabeledcustomoptions',()=>({components:{VSelect},template:``}))我发现它的可读性不是很好,所以我想将它们分别作为props或data传递:.add('withlabeledcustomoptionsasprops',()=>({components:{VSelect},props:{option

javascript - react JSX "Parse Error: Unexpected identifier"

目前正在尝试学习ReactJS/JSX,但在创建一个简单的登录表单时遇到了困难:/***@jsxReact.DOM*/varloginForm=React.createClass({getInitialState:function(){return{loggedIn:false};},login:function(event){alert('loggingin');},logout:function(event){alert('loggingout');},render:function(){return(Username:Password:LoginLogout)}});React.

javascript - react : TypeError: Cannot read property 'propTypes' of undefined

请我为以下reactjs页面编写一个单元测试。exportdefaultclassCollapsibleextendsReact.Component{staticpropTypes={title:React.PropTypes.string,children:React.PropTypes.any,};render(){const{title}=this.props;return({title}{this.props.children});}}跟着啧啧Here我在下面写了我的测试describe('Collapsible',()=>{it('works',()=>{letrendere

javascript - 当 redux 状态更新时在组件上调用 forceUpdate()

我有一个问题,redux状态被成功更新,但react组件没有重新渲染,经过一些研究我相信[forceUpdate()][1]可以解决我的问题,但我是不确定实现它的正确方法,即在redux状态更新之后。我尝试在github上查找示例,但没有成功。 最佳答案 正如其他人所说,forceUpdate()基本上是一种hack。只要Prop和状态发生变化,您就可以免费获得更新。React和Redux可以无缝协作,因此请避免任何此类黑客行为。如果您的Redux状态正确更新而您的ReactView没有正确更新,那么您很可能没有以不可变的方式更新。

javascript - React-Native-Maps:如何动画协调?

我正在使用以下代码但没有成功://NativeBase容器内部//类的componentDidMount内部navigator.geolocation.getCurrentPosition((position)=>{varinitialPosition=JSON.stringify(position.coords);this.setState({position:initialPosition});lettempCoords={latitude:Number(position.coords.latitude),longitude:Number(position.coords.longi

javascript - Accessibility - React 确保点击事件有按键事件

我想确保我所有的onClick事件都在onKeyDown事件旁边。我将使用eslint-plugin-jsx-a11y来确保这一点。但在代码中,这是一种实现这种泛型的方法。我的意思是,一直这样做会很烦人:if(event.keyCode===13){...}如果用户使用onClick中的执行函数,我希望有一种方法可以告诉onKeyDown中的元素。或者类似的解决方案http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/例如,在Angular方面,我很清楚。让我们寻找

javascript - Vue (nuxt) 中的全局组件

在构建Vue应用程序时,我们在每个模板中重复使用某些Vue组件。我们的网格系统存在于.region、.layout、.grid、.column元素之外。它们都是独立的Vue组件(,...)。我们现在在每个模板中都这样做:importBlMainfrom'~components/frame/main/Main.vue'importBlRegionfrom'~components/frame/region/Region.vue'importBlLayoutfrom'~components/frame/layout/Layout.vue'importBlGridfrom'~component

javascript - react-router 在生产和激增部署中不起作用

我的React应用程序在本地主机上运行良好,但是当我将其部署在gh-pages或surge中时,它无法让我使用URL在页面之间移动。这是项目仓库link演示网址here用户可以点击右上角的menuItem进入注册页面。但如果用户使用http://chat.susi.ai/signup/URL,它给出了404页面我尝试了几种来自互联网的解决方案,但没有奏效。下一个问题是:我创建了一个404页面以在用户尝试移动到损坏的链接时显示。它在localhost中工作正常。但不在生产中。我试过this解决方案,但没有任何改变。这是我的index.js文件的一部分constApp=()=>();Rea

javascript - React,如何从 parent 那里访问 child 的状态?无需更新 parent 的状态

你好,我是React的新手,我很难全神贯注于整个状态管理以及通过状态和Prop传递数据。我确实理解标准的react方式是以单向方式传递数据-从parent到child,我已经为所有其他组件这样做了。但是我有一个名为Book的组件,它会根据用户选择表单“阅读、想要阅读、当前正在阅读和无”来更改其“书架”状态。在呈现Book组件的BookList组件中,它需要能够读取Book的书架状态并在名为“read、wantToRead、currentlyReading和none”的部分下呈现正确的书籍。由于在这种情况下,Book组件是从BookList组件呈现的,而BookList是父组件,我真的不